@keyframes jump {
  0%,
  100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(var(--load-deg));
  }
}
:root {
  --load-w: 80px;
  --load-h: 80px;
  --load-rad: 50%;
  --load-name: spin;
  --load-deg: 360deg;
}

.rui-nb-spinner,
.rui-top-spinner,
.rui-tb-spinner,
.rui-tl-spinner::before,
.rui-tl-spinner::after,
.rui-reverse-spinner::before,
.rui-reverse-spinner::after,
.rui-loading-dot,
.rui-loading-dot::before,
.rui-loading-dot::after {
  --load-time: 1s;
  --load-dt: 0s;
  width: var(--load-w);
  height: var(--load-h);
  border-radius: var(--load-rad);
  animation: var(--load-name) var(--load-time) var(--load-dt) linear infinite;
}
.rui-loading-dot {
  --load-w: 20px;
  --load-h: 20px;
  --load-ml: 30px;
  --load-dt: -0.8s;
  --load-bc: #5e85d1;
  --load-name: jump;
  background: var(--load-bc);
  margin-left: var(--load-ml);
  position: relative;
  &::before,
  &::after {
    --load-left: 0;
    content: "";
    position: absolute;
    top: 0;
    left: var(--load-left);
    background: var(--load-bc);
  }
  &::before {
    --load-left: -30px;
    --load-dt: -0.4s;
  }
  &::after {
    --load-left: 30px;
    --load-dt: 0s;
  }
}

.rui-nb-spinner {
  background: transparent;
  border-top: 4px solid #5e85d1;
  border-right: 4px solid transparent;
}

.rui-top-spinner {
  border: 4px solid #222;
  border-top-color: #5e85d1;
}
.rui-tb-spinner {
  border: 4px solid #222;
  border-top-color: #5e85d1;
  border-bottom-color: #5e85d1;
}
.rui-tl-spinner {
  width: var(--load-w);
  height: var(--load-h);
  &::after {
    content: "";
    position: absolute;
    border: 4px solid transparent;
    border-top-color: #5e85d1;
    border-left-color: #5e85d1;
  }
  &::before {
    --load-time: 2s;
    content: "";
    position: absolute;
    border: 4px solid transparent;
    border-top-color: #222;
    border-left-color: #222;
  }
}
.rui-reverse-spinner {
  --load-w: 100px;
  --load-h: 100px;
  width: var(--load-w);
  height: var(--load-h);
  display: flex;
  align-items: center;
  justify-content: center;
  &::before {
    --load-time: 1.5s;
    content: "";
    position: absolute;
    border: 4px solid transparent;
    border-top-color: #5e85d1;
    border-left-color: #5e85d1;
  }
  &::after {
    --load-small-w: 15px;
    --load-deg: -720deg;
    --w: calc(100px - var(--load-small-w) * 2);
    content: "";
    width: var(--w);
    height: var(--w);
    border-radius: var(--load-rad);
    box-sizing: border-box;
    position: absolute;
    border: 4px solid transparent;
    border-top-color: #03a9f4;
    border-left-color: #03a9f4;
  }
}
